<template>
    <div class="bg" @scroll="scr" ref="bigbox">
        <XHeader
            :left-options.showBack="{showBack: false}"
            style="background-color: #55BEC1;"
            class="tabbar"
         >
         <span slot="overwrite-left" type="navicon" style="fill:#fff;position:relative;font-size:20px;color:white">书海小说网</span>
            <router-link :to="islogin?'/me':'/login'" class="rii" sort="right">
                <img :src="loginInf.avatar?'/api/images/avatar/'+loginInf.avatar:'/static/img/noavatarl.jpg'">
            </router-link>
           <router-link to="/search" class="fa fa-search ri" sort="right"></router-link>
        </XHeader>
        <p style="margin:47px 0 0 0"></p>
        <Swiper
            :list="lunbo"
            auto
            loop
        ></Swiper>

        <!--分类-->
        <div class="lei">
            <router-link to="/booklist">
                <div>
                    <span class="fa fa-database lei-icon" style="background-color: #FBAC34;"></span>
                    <br>
                    <span>书库</span>
                </div>
            </router-link>
            <div>
                <span class="fa fa-free-code-camp lei-icon" style="background-color: #E86A5B;"></span>
                <br>
                <span>排行</span>
            </div>
            <router-link to="/free">
                <div>
                    <span class="fa fa-rmb lei-icon" style="background-color:#66C5C7"></span>
                    <br>
                    <span>免费</span>
                </div>
            </router-link>
            <router-link to="/boutique">
                <div>
                    <span class="fa fa-diamond lei-icon" style="background-color:#63A5C0"></span>
                    <br>
                    <span>精品</span>
                </div>
            </router-link>
            
            <div>
                <span class="fa fa-dollar lei-icon" style="background-color:#C4D334"></span>
                <br>
                <span>充值</span>
            </div>
        </div>
        <!--字体滚动-->
        <Swiper auto loop :show-dots="false" direction="vertical" height="30px" class="ylun">
            <span class="fa fa-volume-up vol"></span>
            <SwiperItem v-for="(t,i) in textt" :key="i"><p>{{t}}</p></SwiperItem>
        </Swiper>
        <!--本周主打-->
        <div class="week-main">
            <p class="week-title">本周主打</p>
            <div class="changed" @touchstart="changeee">
                <span class="change-text">换</span>
                <div class="change-tri-top"></div>
                <div class="change-rec"></div>
                <div class="change-tri-bottom"></div>
            </div>
            
            <div class="novel" v-for="(z,i) in zhu" :key="i">
                <router-link :to="'/novel/'+z._id" style="width: 100%;display: flex;">
                    <div><img :src="'/api/images/books/'+z.avatar"></div>
                    <div>
                        <p class="novel-p">{{z.name}}</p>
                        <span class="novel-s">{{z.introduction}}</span>
                    </div>
                </router-link>
            </div>
        </div>
        <!--限时免费-->
        <div class="week-main">
            <p class="week-title">限时免费</p><span @touchstart="goFree" class="fa fa-chevron-right free-r"></span>
            <div class="novel">
                <router-link :to="'/novel/'+freeOne._id" style="width: 100%;display: flex;">
                    <div><img :src="'/api/images/books/'+freeOne.avatar"></div>
                    <div>
                        <p class="novel-p">{{freeOne.name}}</p>
                        <span class="novel-s">{{freeOne.introduction}}</span>
                        <p class="last-time">剩余时间：<span style="color:#77CBCD">14小时</span></p>
                    </div>
                </router-link>
            </div>
            <router-link :to="'/novel/'+freeTwo._id">
                <p style="margin:0;position:relative;text-align:left"><span class="second-state">{{freeTwo.category}}</span><span class="second-name">{{freeTwo.name}}</span><span class="second-time">14小时</span></p>
            </router-link>
        </div>
        <!--精选书单-->
        <div class="bou">
            <p class="week-title" style="padding:15px;">精选书单</p><span @touchstart="goboutique" class="fa fa-chevron-right free-r"></span>
            <img @touchstart="goboutique" :src="'/api/images/boutique/'+bou.avatar">
        </div>
        <!--新书抢先-->
        <div class="week-main">
            <p class="week-title">新书抢先</p>
            <router-link :to="'/novel/'+xinOne._id">
                <div class="end-novel">
                    <div >
                        <div><img :src="'/api/images/books/'+xinOne.avatar"></div>
                    </div>
                    <div>   
                        <p class="novel-p">{{xinOne.name}}</p>
                        <span>{{xinOne.introduction}}</span>
                        <div style="font-size:15px;color:#666;height:25px;"><span>字数：</span><span style="color:#77CBCD">{{xinOne.number|currency}}</span></div>
                    </div>
                </div>
            </router-link>
            
            <div class="tabel-view" v-for="(w,i) in xin" v-if="i!=0">
                <router-link :to="'/novel/'+w._id">
                    <span class="tabel-view-doc" :class="{backcolor:i==2}">{{w.category}}</span>
                    <span class="tabel-view-title">{{w.name}}</span>
                    <span class="tabel-view-number">{{w.number|currency}}</span>
                </router-link>
            </div>
        </div>
        <!--完本推荐-->
        <div class="week-main">
            <p class="week-title">完本推荐</p>
            <router-link :to="'/novel/'+this.first._id">
                <div class="end-novel">
                    <div >
                        <div><img :src="'/api/images/books/'+this.first.avatar"></div>
                    </div>
                    <div>   
                        <p class="novel-p">{{this.first.name}}</p>
                        <span>{{this.first.introduction}}</span>
                        <div style="font-size:15px;color:#666;height:25px;"><span>字数：</span><span style="color:#77CBCD">{{this.first.number|currency}}</span></div>
                    </div>
                </div>
            </router-link>
            
            <div class="tabel-view" v-for="(w,i) in wanben" v-if="i!=0">
                <router-link :to="'/novel/'+w._id">
                    <span class="tabel-view-doc" :class="{backcolor:i==2}">{{w.category}}</span>
                    <span class="tabel-view-title">{{w.name}}</span>
                    <span class="tabel-view-number">{{w.number|currency}}</span>
                </router-link>
            </div>
        </div>
        <!--热门标签-->
        <div class="week-main">
            <p class="week-title">热门标签</p>
            <div class="hot">
                <span @touchstart="labe" class="hot-label" style="background-color:#EEF9F9;color:#A2DBDD;border:solid 2px #55BEC1">总裁</span>
                <span @touchstart="labe" class="hot-label" style="background-color:#FEF0EE;color:#fab8b1;border:solid 2px #f6819a">豪门</span>
                <span @touchstart="labe" class="hot-label" style="background-color:#f6f9fd;color:#b9d0eb;border:solid 2px #9fbee4">穿越</span>
            </div>
            <div class="hot">
                <span @touchstart="labe" class="hot-label" style="background-color:#f8f6f8;color:#d1c4e7;border:solid 2px #b9a4da">宫斗</span>
                <span @touchstart="labe" class="hot-label" style="background-color:#eef8f8;color:#b2dded;border:solid 2px #76c2ed">都市</span>
                <span @touchstart="labe" class="hot-label" style="background-color:#f9f2ee;color:#e6cbbb;border:solid 2px #d99e80">玄幻</span>
            </div>        
        </div>
        <!--回到顶部-->
        <div v-show="showTop" @touchstart="aniToTop" class="fa fa-hand-o-up goTop"><p>回到顶部</p></div>

        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px;">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>

    </div>
</template>

<script>
    import { XHeader, Swiper, SwiperItem } from 'vux'
    import { mapState } from 'vuex'
    export default{
        data:function(){
            return {
                lunbo:[],
                textt:[],
                wanben:[],
                zhu:[],
                num:0,
                first:{},
                freeOne:{},
                freeTwo:{},
                xin:[],
                xinOne:{},
                bou:{},
                showTop:false
            }
        },
        components:{
            XHeader,
            Swiper,
            SwiperItem
        },
        computed:{
            ...mapState([
                "loginInf",
                "islogin"
            ]),
        },
        methods:{
            changeee:function(){
                this.num++;
                if(this.num==3){
                    this.num=0
                }
                this.http.get("/api/zhu",{params:{page:this.num}}).then(res=>{
                    this.zhu = res.data.data;
                })
            },
            labe:function(e){
                var text = e.target.innerText;
                this.$store.commit("setTerm",text);
                location.href="/#/booklist";
            },
            goFree:function(){
                location.href = "/#/free"
            },
            goboutique:function(){
                location.href = "/#/boutique"
            },
            scr:function(e){
                if(e.target.scrollTop>=600){
                    this.showTop =true;
                }else{
                    this.showTop = false;
                }
            },
            aniToTop:function(){
                var timer;
                var a =this;
                function update(){
                    a.$refs.bigbox.scrollTop-=50;
                    timer =requestAnimationFrame(update);
                    if(a.$refs.bigbox.scrollTop<=0){
                        cancelAnimationFrame(timer);
                    }
                }
                update();
            }
        },
        mounted:function(){
            this.$store.commit("setTerm",null);            
            this.http.get("/api/lunbo").then(res=>{
                this.lunbo = res.data.data.pic;
                this.textt = res.data.data.text;
            }),
            this.http.get("/api/zhu",{params:{page:0}}).then(res=>{
                this.zhu = res.data.data;
            }),
            this.http.get("/api/wan").then(res=>{
                this.wanben = res.data.data;
                this.first = res.data.data[0];
            }),
            this.http.get("/api/free").then(res=>{
                this.freeOne = res.data.data[0];
                this.freeTwo = res.data.data[1]
            }),
            this.http.get("/api/xin").then(res=>{
                this.xin = res.data.data;
                this.xinOne = res.data.data[0];
            }),
            this.http.get("/api/getbou").then(res=>{
                this.bou = res.data.data[0];
            })
        }
    }
</script>

<style scoped>
    a{
        color: #777;
    }
    .tabbar{
        position: fixed;
        top: 0;
        z-index: 5;
        width: 100%;
    }
    .rii{
        position: absolute;
        right: 45px;
        font-size: 20px;
        top: 9px;
        color: white;
    }
    .rii img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .ri{
        position: absolute;
        right: 15px;
        font-size: 20px;
        top: 12px;
        color: white;
    }
    .vol{
        position: absolute;
        left: 5px;
        font-size: 22px;
        color: #E86A5B;
    }
    .ylun{
        /*height: 30px;*/
        padding: 5px 6px;
        background-color: white;
    }
    .ylun p{
        margin-left: 32px;
        position: relative;
        top: -10px;
        font-size: 0.7rem;
    }
    .lei{
        padding: 10px;
        display: flex;
        font-size: 15px;
        color: #777;
        justify-content: space-between;
        background-color: white;
    }
    .lei-icon{
        width: 38px;
        height: 42px;
        line-height: 42px;
        font-size: 20px;
        color: white;
        border-radius: 17px;
        margin-bottom: 5px;
    }
    .week-main{
        background-color: white;
        position: relative;
        padding: 15px;
        margin-top: 20px;
    }
    .week-title{
        text-align: left;
        font-size: 20px;
        margin: 0;
        font-weight: bold;
    }
    .week-title::before{
        width: 5px;
        height: 20px;
        display: inline-block;
        position: relative;
        top: 3px;
        left: -15px;
        background-color: #55BEC1;
        content: "";
    }
    .changed{
        margin-left: 20px;
        position: absolute;
        right: 8px;
        top: 23px;
    }
    .change-rec{
        width:24px;
        height: 10px;
        border-left: solid 1px #6ec4d8;
        border-right: solid 1px #6ec4d8;
    }
    .change-tri-top{
        position: absolute;
        width: 17.14px;
        height: 17.14px;
        top: -9px;
        left: 3px;
        transform: rotate(45deg); 
        border-left: solid 1px #6ec4d8;
        border-top: solid 1px #6ec4d8;
    }
    .change-tri-bottom{
        position: absolute;
        width: 17.14px;
        height: 17.14px;
        top: 1px;
        left: 3px;
        transform: rotate(45deg); 
        border-right: solid 1px #6ec4d8;
        border-bottom: solid 1px #6ec4d8;
    }
    .change-text{
        position: absolute;
        left: 3px;
        top: -6px;
        color: #6ec4d8;
    }
    .last-time{
        color: #666;
        margin: 0;
        font-size: 12px;
    }
    .free-r{
        position: absolute;
        right: 10px;
        font-weight: 400px;
        width: 50px;
        top: 25px;
    }
    .second-state{
        position: absolute;
        left: 0;
        top: 10px;
        padding: 0 10px;
        border-radius: 11px;
        line-height: 22px;
        font-size: 13px;
        text-align: left;
        color: white;
        background-color: #B0CAE9;
    }
    .second-name{
        display: inline-block;
        margin-top: 10px;
        color: #333;
        font-weight: 500;
        margin-left: 52px;
        margin-right: 50px;
        text-align: left;
        overflow: hidden;
        width: calc(100% - 120px);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .second-time{
        color: #999;
        position: absolute;
        right: 10px;
        font-size: 13px;
    }
    .bou{
        background-color: white;
        position: relative;
        margin: 20px 0;
    }
    .bou img{
        width: 100%;
        height: 100%;
    }
    .novel,.end-novel{
        display: flex;
        margin: 10px 0;
        height: 110px;
        overflow: hidden;
        text-align: left;
    }
    .novel img,.end-novel img{
        width:80px;
        margin-right: 10px;
    }
    .novel-p{
        margin: 0 0 10px 0;
        font-size: 20px;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
    }
    .novel-s{
        display: inline-block;
        color: #666;
        font-size: 15px;
        line-height: 17px;
        height: 51px;
        overflow: hidden;
    }
    .end-novel span{
        display: inline-block;
        color: #666;
        font-size: 15px;
        height: 45px;
        overflow: hidden;
    }
    .tabel-view{
        height: 50px;
        line-height: 25px;
        padding: 12px 0;
        border-bottom: solid 1px #ddd;
        position: relative;
    }
    .tabel-view-doc{
        font-size: 12px;
        text-align: left;
        background-color: #F9A9A1;
        position: absolute;
        left: 5px;
        color: white;
        padding: 0 10px;
        border-radius: 12px;
    }
    .tabel-view-title{
        position: absolute;
        left: 55px;
        font-size: 18px;
        width: 70%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tabel-view-number{
        font-size: 12px;
        position: absolute;
        right: 5px;
    }
    .hot{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    .hot-label{
        display: inline-block;
        width: 28%;
        font-weight: bold;
        height: 35px;
        line-height: 35px;
    }
    .backcolor{
        background-color: #B0CAE9;
    }
    .goTop{
        width: 44px;
        height: 44px;
        padding-top: 5px;
        font-size: 20px;
        border-radius: 50%;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        bottom: 100px;
        right: 12px;
    }
    .goTop p{
        margin: 0;
        padding-top: 2px;
        font-size: 9px;
    }
</style>